import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button} from 'antd';
import {WeaDialog, WeaLocaleProvider,WeaInputSearch} from 'ecCom';
import {WeaTableNew} from "comsMobx";
import ProgramItem from "./ProgramItem";
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;
const toJS = mobx.toJS;
/**
 * 绩效-考核指标模板
 * jiansong 2020/2/10
 */
@inject("programItemStore")
@observer
export default class ProgramItemList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showItem:false,
            searchname:""
        }
        this.store = this.props.programItemStore;
    }

    componentWillMount() {
        this.store.getProgramItemList();
    }

    render() {
        const {show, changeShow, showStatus} = this.props;
        const {tableStore,clearForm} = this.store;
        const {showItem,searchname} = this.state;
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cr6xxz`}
                icon='icon-coms-implement'
                iconBgcolor='rgb(150, 53, 138)'
                style={{width: 800, height: 550}}
                title={getLabel('18397', '指标模板')}
                hasScroll
                visible={show}
                onCancel={() => changeShow(false)}>
                {showStatus && <div style={{
                    "display": "flex",
                    "justify-content": "flex-end",
                    "align-items": "center",
                    "height": "46px",
                    "padding-right": "20px"
                }}>
                    <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@xmu8hp`} placeholder={getLabel(33439, '名称')} value={searchname} style={{marginRight:"10px"}}
                                    onSearchChange={(v) => this.setState({ searchname: v })} onSearch={this.onSearch}/>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xvqrer`} type='primary' onClick={this.addTarget}>{getLabel(365, '新建')}</Button>
                </div>}
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@q21cee`}
                    comsWeaTableStore={tableStore}
                    hasOrder
                    getColumns={this.getColumns}
                    onOperatesClick={this.onOperatesClick}
                />
                {showItem && <ProgramItem ecId={`${this && this.props && this.props.ecId || ''}_ProgramItem@09nejv`} showItem={showItem} onClick={this.programItemOnClick}/>}
            </WeaDialog>
        )
    }

    programItemOnClick=(id, name,key)=>{
        if(key==1){
            this.store.getProgramItemList();
        }
        this.store.clearForm();
        this.setState({showItem:false})
    }
    getColumns = columns => {
        const {getItemDetail} = this.store;
        const {onQuoteNumClick} = this.props;
        return columns.map(col => {
            if (col.dataIndex == "num") {
                return {
                    ...col,
                    render: (text, record, index) => {
                        if (record.num > 0) {
                            return <a href='javaScript:void(0)' onClick={() => onQuoteNumClick(record)}>
                                {record.num}
                            </a>
                        }
                    }
                };
            } else if (col.dataIndex == "name") {
                return {
                    ...col,
                    render: (text, record, index) => <a href='javaScript:void(0)' onClick={() => {
                        this.store.isadd = false;
                        getItemDetail(record.id);
                        this.setState({showItem:true});
                    }}>
                        {record.name}
                    </a>
                };
            }
            return col;
        });
    };
    onSearch=()=>{
        this.store.getProgramItemList({name:this.state.searchname});
    }

    //表格每行右侧菜单操作
    onOperatesClick=(record, index, operate, flag) =>{
        const {getItemDetail} = this.store;
        this.store.isadd = false;
        getItemDetail(record.id);
        this.setState({showItem:true});
    }

    //新建考核指标模板
    addTarget = () => {
        const {showStatus} = this.props;
        this.store.showStatus = showStatus;
        this.setState({showItem:true});
    }

};